import ButtonView from "@/components/ButtonView";
import CardView from "@/components/CardView";
import { IFormRef } from "@/components/Form/types";
import FormGroup from "@/components/FormGroup";
import { FormGroupPropsData } from "@/components/FormGroup/types";
import PageTitle from "@/components/PageTitle";
import { defineComponent, ref, computed } from "vue";
import { useRequest } from "./request";

export default defineComponent({
  name: "",
  setup() {
    const { confirm, productList, workList } = useRequest();
    const formRef = ref<IFormRef>();
    const form = ref({});
    const render1 = () => {
      const data = computed<FormGroupPropsData[]>(() => [
        {
          data: [
            {
              label: "标题",
              type: "input",
              key: "title",
              rules: [
                {
                  required: true,
                },
              ],
            },
            {
              label: "联系电话",
              type: "input",
              key: "phone",
              rules: [
                {
                  required: true,
                  regular: /^1[3-9]\d{9}$/,
                  message: "请输入正确的联系电话",
                },
              ],
            },
            {
              label: "种植类型",
              type: "select",
              key: "plantType",
              typeData: productList.value,
              rules: [
                {
                  required: true,
                  message: "请选择种植类型",
                },
              ],
            },
            {
              label: "用工类型",
              type: "select",
              key: "workType",
              typeData: workList.value,
              rules: [
                {
                  required: true,
                  message: "请选择用工类型",
                },
              ],
            },
            {
              label: "用工时间",
              type: "timePicker",
              keys: ["workStartTime", "workEndTime"],
              mode: "date",
              rules: [
                {
                  required: true,
                  message: "请选择用工时间",
                },
              ],
            },
            {
              label: "用工价格",
              type: "input",
              key: "workPrice",
            },
            {
              label: "需求人数",
              type: "input",
              key: "needNum",
            },
          ],
        },
      ]);
      return (
        <CardView>
          <FormGroup data={data.value} v-model={form.value} ref={formRef} />
        </CardView>
      );
    };
    const render2 = () => {
      return (
        <ButtonView
          type="primary"
          block
          class="!h-[40px] !mt-[19px]"
          onClick={() => {
            formRef.value?.submit(({ result, error, submitState }) => {
              submitState && confirm(form.value);
            });
          }}
        >
          确定
        </ButtonView>
      );
    };
    return () => {
      return (
        <PageTitle title="发布用工需求" childClass="!pb-[0px]">
          <div class="flex flex-col flex-1 justify-between mx-[12px] box-border mt-[12px] mb-[20px] ">
            {render1()}
            {render2()}
          </div>
        </PageTitle>
      );
    };
  },
});
